<template>
  <view class="size-full animate-fadeIn flex fixed inset-0 flex-col gap-[10vh] justify-center items-center bg-white">
    <view class="loader animate-scaleIn"></view>
    <view></view>
  </view>
</template>

<script>
  export default {
    name: 'yy-loading',
    props: {},
    data() {
      return {}
    },
    computed: {},
    methods: {},
    watch: {}
  }
</script>

<style lang="scss" scoped>
  /* HTML: <div class="loader"></div> */
  .loader {
    width: 32px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
    background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
    background-size: 11px 11px;
    animation: l7 1s infinite;
  }
  @keyframes l7 {
    to {
      transform: rotate(0.5turn);
    }
  }
</style>
